<!-- 历史人物大事记 -->
<template>
    <el-dialog :title="emperorRecord?.name" width="70%" center align-center>
        <el-descriptions :column="3" border>
            <el-descriptions-item
            label="朝代"
            label-align="right"
            align="center"
            label-class-name="my-label"
            class-name="my-content"
            width="150px"
            >
            {{ emperorRecord?.dynasty }}
            </el-descriptions-item>
            <el-descriptions-item label="庙号" label-align="right" align="center">
            {{ emperorRecord?.dynastyTitle }}
            </el-descriptions-item>
            <el-descriptions-item label="年号" label-align="right" align="center">
            {{ emperorRecord?.reignTitle }}
            </el-descriptions-item>
            <el-descriptions-item label="陵墓" label-align="right" align="center">
            {{ emperorRecord?.mausoleum }}
            </el-descriptions-item>
            <el-descriptions-item label="出生日期" label-align="right" align="center">
            {{ emperorRecord?.dateOfBirth }}
            </el-descriptions-item>
            <el-descriptions-item label="死亡日期" label-align="right" align="center">
            {{ emperorRecord?.dateOfDeath }}
            </el-descriptions-item>
            <el-descriptions-item label="简介" label-align="right" align="center">
            {{ emperorRecord?.introduction }}
            </el-descriptions-item>
        </el-descriptions>
        <br/>
        <!-- 添加一个from表单,用来添加明细 -->
        <div class="vitaeFromDiv">
            <h3>添加或编辑</h3>
            <div class="vitaeFromDetil">
                <el-form
                    ref="vitaeFormRef"
                    :model="vitaeForm"
                    :rules="rules"
                    :inline="true"
                    class="form-inline"
                    status-icon
                >
                    <el-form-item label="id" prop="id" v-model="showEl" v-if="showEl==true">
                    <el-input v-model="vitaeForm.id"/>
                    </el-form-item>
                    <el-form-item label="emperorId" prop="emperorId" v-model="showEl" v-if="showEl==true">
                    <el-input v-model="vitaeForm.emperorId"/>
                    </el-form-item>
                    <el-form-item label="年份" prop="year">
                    <el-input v-model="vitaeForm.year"  type="number" style="width: 100px;"/>
                    </el-form-item>
                    <el-form-item label="摘要" prop="digest" style="width: 70%;">
                    <el-input v-model="vitaeForm.digest" />
                    </el-form-item>
                    <el-form-item label="详情" prop="details" style="width: 70%;">
                    <el-input v-model="vitaeForm.details" type="textarea"/>
                    </el-form-item>
                    <el-form-item class="button">
                    <el-button type="primary" @click="onSubmit(vitaeFormRef)">提交</el-button>
                    </el-form-item>
                    <el-form-item>
                    <el-button type="primary" @click="resetForm(vitaeFormRef)">重置</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <div class="vitaeFromDiv">
            <div class="vitaeFromDetil">
                <el-scrollbar height="350px">
                    <section style="max-width: 800px; margin: auto;">
                        <el-timeline style="max-width: 800px">
                        <el-timeline-item v-for="vitaeItem in vitaes" :timestamp="vitaeItem.year + '年'" placement="top">
                            <el-card @click="onEdit(vitaeItem)">
                                <el-row :gutter="10">
                                    <el-col :span="22">
                                        <h4>{{ vitaeItem.digest }}</h4>
                                        <p>{{ vitaeItem.details }}</p>
                                    </el-col>
                                    <el-col :span="2">
                                        <el-button type="danger" @click="onDelete(vitaeForm.id, vitaeFormRef)">删除</el-button>
                                    </el-col>
                                </el-row>
                            </el-card>
                        </el-timeline-item>
                        </el-timeline>
                    </section>
                </el-scrollbar>
            </div>
        </div>
    </el-dialog>
</template>
<script lang="ts" setup>
import { Emperor, Vitae } from '@/type/Story';
import { ref,reactive,toRefs,Ref,PropType, computed } from "vue";

import { ElTable, FormInstance, FormRules,ElMessage,genFileId } from 'element-plus'
import axios from '@/request';
import api from '@/api';
// form表单相关
const showEl = ref(false)
const props = defineProps({  // 可以拿到它的值
    emperorRecord: Object as PropType<Emperor>,
})
//此处必须用toRefs，否则将失去响应式
const { emperorRecord } = toRefs(props);
// 查询历史人物详情
const vitaes: Ref<Vitae[]> = ref([])
// 查询历史人物简历
getStoryDetails(emperorRecord?.value?.id);
function getStoryDetails(emperorId?: number) {
  const params = {
    emperorId: emperorId
  }
  // 请求需要的参数
  const resp = axios.get<Vitae[]>(api.vitaeByEmperor, params);
    resp.then((res)=>{
    vitaes.value = res.data? res.data:[];
    // console.log(vitaes.value);
  });
}

// 这里开始添加或修改数据
const vitaeFormRef = ref<FormInstance>()
const vitaeForm = reactive<Vitae>({
  id: undefined,
  emperorId: emperorRecord?.value?.id,
  year: '',
  digest: '',
  details: '',
})
const rules = reactive<FormRules<Vitae>>({
  year: [
    { required: true, message: 'Please input Activity name', trigger: 'blur' },
    { min: 1, max: 10, message: 'Length should be 1 to 20', trigger: 'blur' },
  ],
  digest: [
    { required: true, message: 'Please input Activity code', trigger: 'blur' },
    { min: 1, max: 255, message: 'Length should be 1 to 20', trigger: 'blur' },
  ],
  details: [
    { required: true, message: 'Please input Activity path', trigger: 'blur' },
    { min: 1, max: 2550, message: 'Length should be 1 to 100', trigger: 'blur' },
  ],
})

const onSubmit = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      const parms = axios.post(api.vitae,vitaeForm)
      parms.then((res)=>{
        if(res.msg == "success"){
          ElMessage({
            message: '提交成功.',
            type: 'success',
          })
          resetForm(formEl)
          getStoryDetails(emperorRecord?.value?.id);
        }else {
          ElMessage.error('提交失败.')
        }
      });
    // console.log('submit!', fields)
    } else {
    //   console.log('error submit!', fields)
      ElMessage.error('校验失败.')
    }
  })
}

const onEdit = (vitaeItem: Vitae) => {
    vitaeForm.id = vitaeItem.id;
    vitaeForm.emperorId = vitaeItem.emperorId;
    vitaeForm.year = vitaeItem.year;
    vitaeForm.digest = vitaeItem.digest;
    vitaeForm.details = vitaeItem.details;
}

const onDelete = (vitaeId: number | undefined, formEl: FormInstance | undefined) => {
  if (!vitaeId) return
  const url = api.vitae + "/"+ vitaeId;
  const parms = axios.delete(url)
  parms.then((res)=>{
    if(res.msg == "success"){
      ElMessage({
        message: '删除成功.',
        type: 'success',
      })
      // 刷新页面
      resetForm(formEl);
      getStoryDetails(emperorRecord?.value?.id);
    }else {
      ElMessage.error('提交失败.')
    }
  })
}
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields();
}
</script>
<style scoped lang="less">
:deep(.my-label) {
  background: var(--el-color-success-light-9) !important;
}
:deep(.my-content) {
  background: var(--el-color-danger-light-9);
}
.form-inline .el-form-item {
    margin-bottom: 0;
}
.vitaeFromDiv {
    width: 99%;
    color: #000;
    background-color: #f6f4f0;
    background-color: #d0e69c;
    background-color: #dcecb5;
    background-color: #e5eecc;
    margin: 5px 0;
    padding: 5px;
    border: 1px solid #d4d4d4;
    background-image: -webkit-linear-gradient(#fff, #e5eecc 100px);
    background-image: linear-gradient(#fff, #e5eecc 100px);
}
.vitaeFromDetil {
    position: relative;
    line-height: 1.4em;
    width: 98%;
    background-color: #f9f9f9;
    padding: 5px;
    border: 1px solid #d4d4d4;
    font-size: 110%;
    font-family: Menlo, Monaco, Consolas, "Andale Mono", "lucida console", "Courier New", monospace;
    word-break: break-all;
    word-wrap: break-word;
}
.button .el-form-item__content{
    width: auto;
}
</style>